<template>
	<div>
		<div id="XSDFXPage" class="XSDFXPage"></div>
	</div>
</template>
<script>
	export default {
	props:{
		mapHeight:{
			type:Number,
			default:500
		},
		//经度
		longitude:{
			type:Number,
			default:116.404
		},
		// 纬度
		latitude:{
			type:Number,
			default:39.915
		},
		description:{
			type:String,
			default:''
		}
		},
		data () {
			return {
				long:'',
				lat:'',
				site:'',
				map:'',
				myIcon:'',
				marker:''

			}
		},
		mounted() {
			this.maps();
		},
		methods:{
			getPosition(point){
				this.map.centerAndZoom(point, 11);
			},
			maps(){
				this.map = new BMap.Map("XSDFXPage",{enableMapClick:false});
				// 初始化地图,设置中心点坐标和地图级别
				this.map.enableScrollWheelZoom(true);
				this.map.addControl(new BMap.NavigationControl());    
				this.map.addControl(new BMap.ScaleControl());    
				this.map.addControl(new BMap.OverviewMapControl());    
				// this.map.addControl(new BMap.MapTypeControl());
				this.myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
				var point = new BMap.Point(116.404, 39.915); // 创建点坐标     
				this.map.centerAndZoom(point, 11); // 初始化地图，设置中心点坐标和地图级别
				this.marker=new BMap.Marker({lng:this.longitude, lat:this.latitude},{icon:this.myIcon});
				this.map.addOverlay(this.marker);
				// 添加地图类型控件  
				//添加新图标的监听事件
				this.map.addEventListener('click', (e) =>{
					if(this.description==""){
						this.$message({
                        type: 'warning',
                        message: '请先选择区县！'
                        });
						return;
					}
					this.map.clearOverlays();
					this.marker=new BMap.Marker(e.point,{icon:this.myIcon}); 
					this.long = e.point.lng;
					this.lat = e.point.lat;
					var pt = e.point;
					var gc = new BMap.Geocoder(); 
					gc.getLocation(pt, (rs) =>{
						//addressComponents对象可以获取到详细的地址信息
						var addComp = rs.addressComponents;
						var street = addComp.street;
						if(addComp.street==""){
							street = ""
						}else{
							street = ", " + addComp.street;
						}
						var site = addComp.province + ", " + addComp.city + ", " + addComp.district + street;
						//将对应的HTML元素设置值
						this.site = site;
						var content="<div style='font-size:12px'>地址:&nbsp;" +site+"</div>";  
						var info=new BMap.InfoWindow(content);     
						this.map.addOverlay(this.marker);
						this.marker.openInfoWindow(info);
						let cur = [this.long,this.lat,this.site]
						this.$emit('clickMap',cur);
					});     
					
				})
			},
		}
	}
</script>
<style scoped>
.XSDFXPage{
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 0;
		font-family: "微软雅黑";
	}
</style>